<template>
	<view>
		<view class="p10 bf" @click="toSearch">
			<u-input prefixIcon="search" placeholder="请输入内容" border="none" shape="circle"
				:customStyle="{height:'60rpx',paddingLeft:'20rpx'}" v-model="value" disabled>
			</u-input>
		</view>
		<lee-linkage :list="dataList" @changeShow="changeShow" @valChange="valChange">
		</lee-linkage>
		<view class="car dfbc p-15-20 bf w100">
			<view class="dfa">
				<view style="position:relative" @click="showCar=true">
					<text class="iconfont icon-gouwuchekong p5 bf5 bs6" style="font-size:26px"></text>
					<u-badge bgColor="#f56c6c" max="99" :value="sum" :absolute="true" :offset="[-13,-13]"></u-badge>
				</view>
				<text class="f14 ml10">合计</text>
				<text class="f18 c0 wei6">￥{{price}}</text>
			</view>
			<view class="">
				<u-button :disabled="sum==0" text="选好了" :color="subColor" @click="complete"></u-button>
			</view>
		</view>
		<u-popup :show="showCar" :round="10" @close="showCar=false" @open="showCar=true">
			<view class="p15 pb80 c0 f16">
				<view class="dfbc mb10">
					<text>已选菜品</text>
					<text class="f14" :style="{color:subColor}" @click="del">清空</text>
				</view>
				<view class="dfbc bb1 p-10-0" v-for="(item,index) in list" :key="index">
					<text>{{item.name}}</text>
					<view class="dfa">
						<text class="mr10">{{item.price}}</text>
						<u-number-box v-model="item.orderNum" button-size="20" color="#ffffff" bgColor="#2979ff"
							iconStyle="color: #fff" :min="0" :name="index" disabledInput @change="changeNum">
						</u-number-box>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="showDel" title="确定清空购物车吗？" :showCancelButton="true" :confirmColor="subColor" cancelText="取消"
			@cancel="showDel=false" @close="showDel=false" @confirm="confirm" ref="uModal"></u-modal>
	</view>
</template>

<script>
	import leeLinkage from './linkage.vue'
	export default {
		components: {
			leeLinkage
		},
		props: {
			dataList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				showDel: false,
				showCar: false,
				show: false,
				replenish: 1,
				state: 0,
				value: '',
				form: {},
				list: [],
			}
		},
		computed: {
			price() {
				if (this.list.length > 0) {
					let a = 0
					this.list.forEach(v => {
						a += v.price * v.orderNum
					})
					return a
				} else {
					return '0.00'
				}
			},
			sum() {
				if (this.list.length > 0) {
					let a = 0
					this.list.forEach(v => {
						a += v.orderNum
					})
					return a
				} else {
					return 0
				}
			}
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: '/pages/home/search/index'
				})
			},
			tab(type) {
				if (type === 1) {
					console.log(type);
					this.show2 = false
					this.show1 = !this.show1
				}
				if (type === 2) {
					this.show1 = false
					this.show2 = !this.show2
				}
			},
			valChange(val) {
				console.log(val);
				if (this.list.length == 0) {
					this.list.push(val)
				} else {
					if (!this.list.some(v => v.name == val.name)) {
						this.list.push(val)
					} else {
						this.list.forEach(v => {
							if (v.name == val.name) {
								v.orderNum = val.orderNum
							}
						})
					}
				}
				console.log(this.list);
			},
			changeShow(value) {
				this.show = value
			},
			save() {
				this.show = false
			},
			del() {
				if (this.list.length == 0) {
					uni.showToast({
						title: '购物车无数据！',
						icon: 'none',
						duration: 800
					});
				} else {
					this.showDel = true
				}
				// this.list = []
			},
			complete() {
				this.showCar = false
				uni.navigateTo({
					// url: "/pages/order/orders/index"
					url: "pages/order/orders/detail"
				})
			},
			changeNum(e) {
				console.log(e);
				this.list[e.name].orderNum = e.value
				if (e.value === 0 && this.list.length > 0) {
					this.list.splice(e.name, 1)
				}
			},
			confirm() {
				this.list = []
				this.showDel = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.car {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999999;
	}
</style>